<template>
	<view class="page" :style="pageStyle">
		<view v-if="showAd" style="width: 250px; height: 250px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
			<u-icon @click="closeAd" name="close" style="position: absolute; top:4%;right: 4%; z-index: 99999;"></u-icon>
			<u-image :src="imgSrc" width="250px" height="250px" showMenuByLongpress="true" @click="previewImg"></u-image>
		</view>
		<!-- 广告 -->
		<!-- <card @closeAd="closeAd()" v-if="showShadow"></card> -->
		<view class="top" :style="'height:' + (0.38* height) + 'rpx'">
			<view class="tip">
				<text>点击下方按钮<text class="iconfont icon-xiangxiajiantoucuxiao"></text>进行一键评教</text>
			</view>
			<view class="triangle"></view>
		</view>
		<button class="button" @click="toEvaluste()" :disabled="isUse">
			<view>一键评教</view>
		</button>
		<view class="tipDown">
			<view class="left_border"></view>
			<view class="right_border"></view>
			<view style="padding: 20rpx 30rpx 10rpx 20rpx;">根据学校规定，只有完成了教学评价后才能查看期末考试成绩。</view>
			<view style="padding-left: 20rpx;padding-right: 20rpx;">点击上方按钮后将自动为您的教学评价的所有选项设置为“完全同意”或“比较同意”，并自动提交所有评价。
			</view>
			<view style="margin-top: 15rpx;padding-left: 20rpx;padding-right: 20rpx;">教务官网评教开放时间：2021年12月20日00:00 至
				2021年12月31日23:59</view>
		</view>
		<u-toast ref="uSuccess"></u-toast>
	</view>
</template>

<script>
	let interstitialAd = null;
	import card from "../../components/card/card.vue"
	export default {
		onLoad() {
			// if (Math.floor((Math.random()*100)+1)%3 === 0) {
			//                 this.showAd = false
			//         }
			uni.getStorage({
				key: 'imgSrc',
				success: (res) => {
					console.log(1)
					const arr = JSON.parse(res.data);
					this.imgSrcArr = arr
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				},
				fail: () => {
					console.log(3)
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				}
			});
			},
		created() {
			let that = this;
			// let num = Math.round(Math.random()); //获取随机数为 0 / 1
			// console.log(num)
			// if (num) {
			// 	// this.showShadow = true;
				

			// } else {
			// 	// this.showShadow = false;
			// }
			setTimeout(() => {
				that.interstitialShow(0)
			},300)
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					// console.log(res.windowHeight);

					that.height = res.windowHeight * pxToRpxScale;
					console.log(that.height)
				}
			});
		},
		onHide() {
			// console.log("onHide监听页面隐藏")
			if (interstitialAd) {
					interstitialAd = null;
			}
		},
		data() {
			return {
				height: 0,
				isUse: false,
				showAd:true,
				imgSrc: '',
				imgSrcArr: ['http://1.14.247.152:9797/images/饿了么.jpg', 'http://1.14.247.152:9797/images/美团.jpg'],
				showShadow: false //展示遮罩层
			}
		},
		computed: {
			pageStyle() {
				if (this.showShadow) {
					return 'overflow: hidden; height:' + this.height + 'rpx';
				} else {
					console.log('改变')
					return ' height:' + this.height + 'rpx';
				}
			}
		},
		methods: {
			interstitialShow(times) { //显示插屏广告
				var that = this;
				setTimeout(() => {
					if (interstitialAd) {
						console.log('插屏广告正在显示....');
						interstitialAd.show().catch((err) => {
							console.error("插屏广告显示失败：", err);
							switch (err.errCode) {
								case 2001:
									//打开小程序一定时间内不允许展示
									that.interstitialShow(1000);
									break;
								case 2002:
									//距离小程序插屏广告或者激励视频广告上次播放时间间隔不足，不允许展示插屏广告
									that.interstitialShow(1000);
									break;
								default:
									break;
							}
						})
					}
				}, times)
			},
			toEvaluste() {
				let that = this;
				uni.showModal({
					title: '',
					content: '当前为非评教时间',
					showCancel: false,
					success: function() {
					
				}
				});
				// let header = new Object()
				// header.Authority = uni.getStorageSync("Authority")
				// uni.showModal({
				// 	title: '',
				// 	content: '首次评教大约需要30秒，确定进行评教？',
				// 	success: async function(res) {
				// 		if (res.confirm) {
				// 			uni.showLoading({
				// 				title: '评教中...'
				// 			});
				// 			that.isUse = true
				// 			let res = await getApp().UniRequest("/user/authority/evaluate", "POST", "",
				// 				header);
				// 			console.log(res);
				// 			uni.hideLoading();
				// 			if (res.code === 20000) {

				// 				uni.showToast({
				// 					title: '评教成功',
				// 					duration: 2000
				// 				});
				// 			} else {
				// 				// uni.hideLoading();
				// 				uni.showToast({
				// 					title: '教务网出现问题了，请稍后重试',
				// 					duration: 2000,
				// 				});
				// 			}
				// 			that.isUse = false
				// 		} else if (res.cancel) {
				// 			// console.log('用户点击取消');
				// 		}
				// 	}
				// });
			},
			showSuccess() {
				let params = {
						type: 'success',
						message: "评教成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					}
					this.$refs.uToast.show({
						...params,
						complete() {
							params.url && uni.navigateTo({
								url: params.url
							})
						}
					})
			},
			closeAd() {
				this.showAd=false;
			},
			
			previewImg() {
			                let _this = this;
			                let imgsArray = [];
			                imgsArray[0] = this.imgSrc
			                uni.previewImage({
			                    current: 0,
			                    urls: imgsArray
			                });
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100%;
		// background-color: ;
		position: relative;

		/deep/ .u-image {
			
			// border-radius: 35px !important;
			
			.u-image__image {
				border-radius: 25px !important;
			}
		}
		
		.top {
			background-color: #87cefa;
			position: relative;

			.tip {
				position: absolute;
				top: 140rpx;
				left: 40rpx;
				font-size: 38rpx;
				font-weight: 700;
				color: #FFFFFF;
				letter-spacing: 4rpx;
			}

			.triangle {
				position: absolute;
				width: 100%;
				// height: 150rpx;
				border: 75rpx solid #FFFFFF;
				border-top: 75rpx solid transparent;
				border-left: 75rpx solid transparent;
				bottom: 0rpx;
			}
		}

		.button {
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			// background-color: #000;
			background-color: #FFFFFF;
			box-shadow: 0.5rpx 0.5rpx 20rpx #DBDBDB;
			position: absolute;
			top: 34%;
			left: 50%;
			margin-top: -150rpx;
			margin-left: -150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 48rpx;
			letter-spacing: 5rpx;
			color: #87cefa;
		}

		.tipDown {
			width: 600rpx;
			// height: 600rpx;
			position: relative;
			top: 15%;
			// margin-top: -200rpx;
			left: 50%;
			margin-left: -300rpx;
			font-size: 32rpx;
			color: #5E5E5E;
			line-height: 50rpx;

			.left_border {
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				border-top: 10rpx solid #87cefa;
				border-left: 10rpx solid #87cefa;
				// background-color: pink;
			}

			.right_border {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 50rpx;
				height: 50rpx;
				border-bottom: 10rpx solid #87cefa;
				border-right: 10rpx solid #87cefa;
				// background-color: pink;
			}
		}
	}
</style>
